import {ref} from 'vue3.js'
// 颜色配置
const upColor = "#ec0000"
const upBorderColor = "#8A0000"
const downColor = "#00da3c"
const downBorderColor = "#008F28"
// k线图配置项
var option = {
	// 图表标题配置
	title: {
		text: '近一年K线图'
	},
	// 提示框配置
	tooltip: {
		// 是否显示提示框
		show: true,
		// 触发类型，axis 移动到坐标轴就触发
		trigger: "axis",
		// 坐标轴上提示点设置
		axisPointer: {
			type: "cross"
		}
	},
	// 图例配置
	legend: {
		data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
	},
	// X 轴配置项
	xAxis: {
		type: "category",
		data: this.kChartdata.stock_trade_days,
		boundaryGap: false,
		axisLine: {
			onZero: false
		},
		splitLine: {
			show: true
		},
		min: "dataMin",
		max: "dataMax"
	},
	// y 轴配置项
	yAxis: {
		scale: true,
		splitArea: {
			show: true
		}
	},
	dataZoom: [{
			type: "inside",
			start: 50,
			end: 100
		},
		{
			show: true,
			type: "slider",
			top: "90%",
			start: 50,
			end: 100
		}
	],
	// 系列配置，根据不同图表有不同的配置
	series: [{
			name: "日K",
			// 图表类型
			type: 'candlestick',
			// 数据内容
			data: this.kChartdata.stock_trade_data,
			// K 线图的图形样式
			itemStyle: {
				// 阳线 图形的颜色
				color: upColor,
				// 阴线 图形的颜色。
				color0: downColor,
				// 阳线 图形的描边颜色
				borderColor: upBorderColor,
				// 阴线 图形的描边颜色
				borderVolor0: downBorderColor
			},
			// 标记点配置
			markPoint: {
				// 标注的文本
				label: {
					// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
					// 参数 params 是 formatter 需要的单个数据集, value是传入的数据值。
					formatter: function(param) {
						return param != null ? Math.round(param.value) + "" :
							"";
					}
				},
				// 标注的数据数组。每个数组项是一个对象
				data: [
					// 特殊的标注类型，用于标注最大值最小值等
					{
						name: "highest value",
						type: "max",
						// 在使用 type 时有效，用于指定在哪个维度上指定最大值最小值。
						valueDim: "highest",
					},
					{
						name: 'lowest value',
						type: 'min',
						valueDim: 'lowest'
					},
					{
						name: 'average value on close',
						type: 'average',
						valueDim: 'close'
					}
				],
				// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
				tooltip: {
					// params 是 formatter 需要的数据集
					formatter: function(param) {
						// name数据名，类目名,data传入的原始数据项
						return param.name + "<br>" + (param.data.coord || "")
					}
				}
			},
			markLine: {
				// 标线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定
				symbol: ['none', 'none'],
				// 标线的数据数组。每个数组项可以是一个两个值的数组，分别表示线的起点和终点，每一项是一个对象
				data: [
					[
						// 定义从最小值到最大值的线
						{
							name: "from lowest to highest",
							type: "min",
							valueDim: "lowest",
							symbol: "circle",
							symbolSize: 10,
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: false
								}
							}
						},
						{
							type: "max",
							valueDim: "highest",
							symbol: "circle",
							symbolSize: 10,
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: false
								}
							}
						},
					],
					// 最小值水平线
					{
						name: "min line on close",
						type: "min",
						valueDim: "close"
					},
					// 最大值水平线
					{
						name: "max line on close",
						type: "max",
						valueDim: "close"
					},
				],
			}
		},
		{
			name: "MA5",
			type: "line",
			data: this.kChartdata.MA5,
			smooth: true,
			lineStyle: {
				opacity: 0.5
			}
		},
		{
			name: "MA10",
			type: "line",
			data: this.kChartdata.MA10,
			smooth: true,
			lineStyle: {
				opacity: 0.5
			}
		},
		{
			name: "MA20",
			type: "line",
			data: this.kChartdata.MA20,
			smooth: true,
			lineStyle: {
				opacity: 0.5
			}
		},
		{
			name: "MA30",
			type: "line",
			data: this.kChartdata.MA30,
			smooth: true,
			lineStyle: {
				opacity: 0.5
			}
		},
	]
}